<template>
  <tr>
    <td>
      <input type="checkbox" v-model="obj.checked" />
    </td>
    <td>{{ obj.name }}</td>
    <td>{{ obj.price }}</td>
    <td>
      <button @click="addfn">+</button>
      <span>{{ obj.num }}</span>
      <!-- disabled为true禁用 -->
      <button @click="subfn" :disabled="obj.num === 0">-</button>
    </td>
    <td>{{ obj.price * obj.num }}</td>
    <td>
      <button @click="delfn">删除</button>
    </td>
  </tr>
</template>

<script>
export default {
  props: ["obj","index"], //可以更改obj的属性值（对象是引用关系，间接，影响了外部数组里的对象）
  computed: {
    total() {
      return this.price * this.count;
    },
  },
  methods: {
    addfn() {
      this.obj.num++;
    },
    subfn() {
      this.obj.num >= 1 && this.obj.num--;
    },
    delfn(index){
        //因为对象里没有index属性，所以我们需要声明一个
        this.$emit("del",this.index)
    }
  },
};
</script>

<style scoped>
td {
  text-align: center;
}
</style>